<template>
  <v-snackbar
    v-model="visible"
    :color="type"
    :timeout="timeout"
    location="top"
    multi-line
  >
    <div class="d-flex align-center">
      <v-icon class="me-2">
        {{ getIcon() }}
      </v-icon>
      {{ message }}
    </div>
    <template v-slot:actions>
      <v-btn
        color="white"
        variant="text"
        @click="visible = false"
      >
        关闭
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  message: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'info', // success, error, warning, info
    validator: (value) => ['success', 'error', 'warning', 'info'].includes(value)
  },
  timeout: {
    type: Number,
    default: 2000
  },
  show: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:show'])

const visible = ref(false)

/**
 * 根据消息类型获取对应图标
 * @returns {string} 图标名称
 */
const getIcon = () => {
  const icons = {
    success: 'ri-check-line',
    error: 'ri-error-warning-line',
    warning: 'ri-alert-line',
    info: 'ri-information-line'
  }
  return icons[props.type] || icons.info
}

watch(() => props.show, (newVal) => {
  visible.value = newVal
})

watch(visible, (newVal) => {
  emit('update:show', newVal)
})
</script>